<template>
  <div v-if="detailData">
    <a-form-model
      ref="baidumapForm"
      :model="detailData"
      :rules="rules"
    >
      <a-row>
        <a-col>
          <a-form-model-item
            label="地址"
            :labelCol="{span: 3}"
            :wrapperCol="{span: 21}"
            prop="place.address"
          >
            <a-auto-complete
              v-model="detailData.place.address"
              placeholder="input here"
              @search="searchMap"
              @select="searchChange"
            >
              <template slot="dataSource">
                <a-select-option v-for="(item, index) in mapResultDataSource" :key="index + ''">
                  {{ item.title }}
                </a-select-option>
              </template>
            </a-auto-complete>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <baidu-map :center="mapCenter" :zoom="15" class="map" @ready="handlerMap" @click="mapClick">
      <bm-marker v-if="mapCenter" :position="{lng: mapCenter.lng, lat: mapCenter.lat}">
        <bm-label :content="(detailData)? detailData.place.address: ''" :labelStyle="{color: 'red'}" :offset="{height: 30}"/>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'CustomBaiduMap',
  data () {
    return {
      mapCenter: {
        lng: 120.14091,
        lat: 30.333948
      },
      mapResultDataSource: [],
      form: {
        address: '123'
      },
      rules: {
        'place.address': [
          { required: true, message: 'Please input Activity name', trigger: 'change' }
        ]
      }
    }
  },
  props: {
    detailData: {
      type: Object,
      default: null
    }
  },
  methods: {
    handlerMap ({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    mapClick ({ type, target, point, pixel, overlay }) {
      const myGeo = new BMap.Geocoder()
      myGeo.getLocation(point, (res) => {
        console.log(res)
        this.$emit('mapSelect', { address: res.address, lng: point.lng, lat: point.lat })
      })
      this.mapCenter.lng = point.lng
      this.mapCenter.lat = point.lat
    },
    searchChange (value, item) {
      const mapLocal = this.mapResultDataSource[value]
      console.log(mapLocal)
      console.log(this.mapResultDataSource[value])
      this.mapCenter = mapLocal.point
      this.detailData.place.address = mapLocal.title
      this.$emit('mapSelect', { address: mapLocal.title, lng: this.mapCenter.lng, lat: this.mapCenter.lat })
      // this.table.setFieldsValue({
      //   'place.address': mapLocal.title
      // })
      this.detailData.place.coordinate.longitude = this.mapCenter.lng
      this.detailData.place.coordinate.latitude = this.mapCenter.lat
    },
    handleSearch (value) {
      let result
      if (!value || value.indexOf('@') >= 0) {
        result = []
      } else {
        result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`)
      }
      this.result = result
    },
    searchMap (str) {
      const local = new BMap.LocalSearch(this.map, {
        location: '杭州市',
        renderOptions: { map: this.map },
        onSearchComplete: res => {
          if (!res) return
          this.mapResultDataSource = []
          res.Hr.forEach((item, index) => {
            this.mapResultDataSource.push(item)
          })
          this.detailData.place.address = res.keyword
        }
      })
      console.log(local.search(str))
    }
  }
}
</script>

<style lang="scss" scoped>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>
